<span style="display: none;"
  [id]="id"></span>
<div style="padding: 0 2rem 0 1rem"
  *ngIf="onlySmartField">

  <!-- smart-input -->

  <app-code-style-smart-input-field apiLink="{{apiLink}}"
    [mappingList]="mappingList | async"
    [simplefield]="true"
    (updateData)="onSmartInputCodeData($event)"
    (keyEnter)="doSearchResult()"
    #onlySmartFieldElement>
  </app-code-style-smart-input-field>
</div>
<div *ngIf="!onlySmartField">
  <div class="inputs-container">

    <div class="example-container-smart"
      [ngStyle]="{'grid-template-columns': getFieldColumns()}">
      <div *ngFor="let item of fields"
       [style.display]="item.shown === false && 'none'"
        [ngClass]="{smartContainer : item.form_type === 'smart-input'}">

        <div *ngIf="item.field_name === 'proto_selector'">
          <!-- static fields -->
          <!-- if proto selector-->
          <app-code-proto-selector [value]="fields[0]?.value"
            [mappingList]="mappingList | async"
            (protoChanged)="onProtoChange($event)"
            [id]="fields[0]?.name">
          </app-code-proto-selector>
        </div>
        <!-- if item is targetResultsContainer -->

        <mat-form-field class="limit-selector"
          style="flex-grow:1; max-width: 150px;"
          [style.display]="item.shown === false && 'none'"
          *ngIf="item.field_name === 'targetResultsContainer'">
          <mat-label>{{item.selection}}</mat-label>
          <mat-select multiple
            [formControl]="targetResultsContainerValue"
            [compareWith]="compareResultListItem"
            (selectionChange)="onChangeTargetResultsContainer()"
            name="targetResultsContainer"
            ngDefaultControl>
            <mat-option *ngFor="let listItem of widgetResultList"
              [value]="listItem">
              {{listItem.type === 'widget' ? 'widget: ' : ''}} {{listItem.title}}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <!-- smart-input -->
        <div>
          <!-- [id]="item.name || item.field_name" -->
          <app-code-style-smart-input-field style="width: 100%;"
            *ngIf="item.form_type === 'smart-input'"
            [apiLink]="item.full_api_link"
            [queryText]="item.value"
            [parent_id]="config.id"
            (keyEnter)="doSearchResult()"
            (updateData)="onSmartInputCodeData($event, item)"></app-code-style-smart-input-field>

        </div>


        <!-- if other Fields -->

        <mat-form-field style="display: block"
          class="limit-selector query"
          [style.display]="item.shown === false && 'none'"
          *ngIf="item.field_name === 'limit'">

          <mat-label>{{item.selection}}</mat-label>

          <!-- Text Field (by Default) -->

          <input matInput
            *ngIf="!item.form_default"
            [(ngModel)]="item.value"
            [ngModelOptions]="{standalone: true}"
            (change)="onChangeField($event)">

          <!-- Autocomplete Text Field -->

          <input matInput
            *ngIf="item.form_default && item.form_type === 'input' && item.selection === 'Query Limit'"
            [formControl]="item.formControl">

        </mat-form-field>


      </div>
    </div>
  </div>

</div>

<div class="action-buttons"
  [className]="buttonState ? 'show' : 'hide'">
  <button mat-raised-button
    class="clear-btn"
    (click)="onClearFields()">{{'LINK.buttons.clear' | translate}}</button>
  <button mat-raised-button
    class="search-btn"
    (click)="doSearchResult()">{{'LINK.buttons.search' | translate}}</button>
</div>
<!-- <div class="info-label">{{ 'widgets.smartInput.widget.ctrlEnter' | translate }}</div> -->
